import {Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {MdInput, MATERIAL_DIRECTIVES} from 'ng2-material/all';

import {HeroListService} from "../../shared/services/hero-list.service";
import {Hero} from "../../shared/types/Hero";
import {ROUTER_DIRECTIVES} from "angular2/router";

@Component({
  selector: 'champions-list',
  templateUrl: 'app/+Champions/components/champions.component.html',
  styleUrls: ['app/+Champions/components/champions.component.css'],
  directives: [
    FORM_DIRECTIVES,
    CORE_DIRECTIVES,
    MdInput,
    MATERIAL_DIRECTIVES,
    ROUTER_DIRECTIVES
  ],
  providers: [
    HeroListService
  ]
})
export class ChampionsComponent implements OnInit {
  constructor(public _heroListService:HeroListService) {
  }

  public allHeroes:Hero[];
  public Heroes:Hero[];
  public q = '';
  public errorMessage:string;

  ngOnInit() {
    //this.level = +this._routeParams.get('level') || 0;
    //let sport_key = this._routeParams.get('key') || '';
    this.getList();
  }

  getList() {
    this._heroListService.getList()
      .subscribe(
        data => {
          this.allHeroes = data;
          this.Heroes = data;
        },
        error => this.errorMessage = <any>error);
  }

  getHeroes() {
    var res:Hero[] = [];
    for (var o of this.allHeroes) {
      if (this.filter_hero(o)) {
        res.push(o);
      }
    }
    this.Heroes = res;
  }

  filter_hero(data:Hero) {
    if (this.q == '') {
      return true;
    }
    let q = this.q.toLowerCase();
    //let cnName = data.cnName.toLowerCase();
    //let cnNickName = data.cnNickName.toLowerCase();
    let name = data.name.toLowerCase();
    return !!(
      data.cnName.indexOf(q) >= 0 ||
      data.cnNickName.indexOf(q) >= 0 ||
      name.indexOf(q) >= 0
    );

  }

}
